// 获取元素 
let box = document.querySelector('.banner');
let ulbox =  document.querySelector('.imgBox');
let olbox =  document.querySelector('.pointBox');
let index = 1; // 当前第几页
let t = 0; // 第几个定时器
let flag = true; // 设定开关 
// 防止同一时刻多个定时器同时执行 
// 自动轮播 定时器 
/// move3也是定时器 
// 元素可视尺寸  
const banner_width = box.clientWidth;
// 复制元素  
copyEle()
function copyEle(){
    // 克隆
    const first = ulbox.firstElementChild.cloneNode(true);
    const last = ulbox.lastElementChild.cloneNode(true);

    // 插入到ul中 
    ulbox.appendChild(first);
    ulbox.insertBefore(last,ulbox.firstElementChild);

    // 调整宽度 
    ulbox.style.width = ulbox.children.length * 100 + '%';

    // 调整位置 让1在初始位置 
    ulbox.style.left =  -index *  banner_width + 'px'

}

// 设置焦点 
setPoint()
function setPoint(){
    const pointNum = ulbox.children.length - 2;
    for(let i=0;i<pointNum;i++){
        const li = document.createElement('li');
        li.classList.add('item');
        if(i===0) li.classList.add('active');
        li.dataset.point = i;
        olbox.appendChild(li);
    }

    // 调整宽度  
    olbox.style.width = ulbox.children.length * (20+10) + 'px';
}

// 自动轮播 
autoplay()
function autoplay(){
    t = setInterval(()=>{
        index++;  // 页码加一 
        move3(ulbox, {left: -index *  banner_width}, 20,moveEnd);
        // 是否越界 在moveEnd中判断 
    },2000);
}

function moveEnd(){
    if(index === ulbox.children.length-1){
        index = 1;
        ulbox.style.left =  -index *  banner_width + 'px';

    }


    if(index === 0){
        index = ulbox.children.length-2;
        ulbox.style.left =  -index *  banner_width + 'px';

    }


    for(let j=0;j<olbox.children.length;j++){
        olbox.children[j].classList.remove('active')
    }
    olbox.children[index-1].classList.add('active');
    flag = true;
}

// 移入 
// 停止轮播 
overOut()
function overOut(){
    box.addEventListener('mouseover',()=>clearInterval(t));
    box.addEventListener('mouseout',()=>autoplay());

}

// 点击事件 事件委托 
bindEvent()
function bindEvent(){
    box.onclick = function(e){
        e = e || window.event;

        // 上一张 
        if(e.target.className === 'left'){
            if(flag === false) return;
            flag = false
            index--;
            move3(ulbox, {left: -index *  banner_width}, 20,moveEnd);
        }
        // 下一张

        if(e.target.className === 'right'){
            if(flag === false) return;
            flag = false
            index++
            move3(ulbox, {left: -index *  banner_width}, 20,moveEnd);
        }

        // 第几张
        if(e.target.className === 'item'){
            if(flag === false) return;
            flag = false;
            index = e.target.dataset.point - 0 + 1;
            move3(ulbox, {left: -index *  banner_width}, 20,moveEnd);
        }

    }
}

// 隐藏再打开页面  有个晃动   
changePage();
function changePage(){
    // 绑定可视状态事件  
    document.onvisibilitychange = function(){
        // console.log(document.visibilityState);
        // hidden 隐藏 visible 展示 
        if(document.visibilityState === 'hidden'){
            clearInterval(t);
        }
        if(document.visibilityState === 'visible'){
            autoplay()
        }
    
    }
}